<template>
  <div class="details-page">
    <!-- 顶部导航栏 -->
    <van-nav-bar
      title="面经详情"
      left-text="返回"
      right-text="取消"
      left-arrow
      @click-left="onClickLeft"
      @click-right="onClickRight"
      fixed
      placeholder
    />

    <div class="content-wrapper">
      <!-- 文章头部信息 -->
      <div class="article-header">
        <h1 class="article-title">{{ details.stem || '加载中...' }}</h1>

        <div class="author-info">
          <img :src="details.avatar" alt="作者头像" class="author-avatar">
          <div class="author-meta">
            <span class="author-name">{{ details.creator }}</span>
            <span class="publish-time">{{ details.createdAt }}</span>
          </div>
        </div>
      </div>

      <!-- 文章内容 -->
      <div class="article-content">
        <div class="content-text" v-html="content">
        </div>
      </div>

      <!-- 互动操作区 -->
      <div class="interaction-panel">
        <div class="stats-info">
          <div class="stat-item">
            <van-icon name="eye-o" class="stat-icon" />
            <span>{{ details.views || 0 }} 浏览</span>
          </div>
          <div class="stat-item">
            <van-icon :name="details.likeFlag ? 'like' : 'like-o'" class="stat-icon" :class="{ active: details.likeFlag }" />
            <span>{{ details.likeCount || 0 }} 点赞</span>
          </div>
          <div class="stat-item">
            <van-icon :name="details.collectFlag ? 'star' : 'star-o'" class="stat-icon" :class="{ active: details.collectFlag }" />
            <span>{{ details.collectCount || 0 }} 收藏</span>
          </div>
        </div>

        <div class="action-buttons">
          <van-button
            type="danger"
            round
            :class="['action-btn', 'like-btn', { 'like-btn-active': details.likeFlag }]"
            :icon="details.likeFlag ? 'like' : 'like-o'"
            @click="handleLike"
          >
            {{ details.likeFlag ? '已点赞' : '点赞' }}
          </van-button>

          <van-button
            type="warning"
            round
            :class="['action-btn', 'collect-btn', { 'collect-btn-active': details.collectFlag }]"
            :icon="details.collectFlag ? 'star' : 'star-o'"
            @click="handleCollect"
          >
            {{ details.collectFlag ? '已收藏' : '收藏' }}
          </van-button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { getArticleDetails, handleOperation } from '@/api/article'

export default {
  data () {
    return {
      id: this.$route.params.id,
      details: {},
      content: ''
    }
  },
  async created () {
    await this.loadArticleDetail()
  },
  methods: {
    async loadArticleDetail () {
      try {
        const res = await getArticleDetails({ id: this.id })
        this.details = res.data || {}
        this.content = res.data.content?.replace(/<.+?>/g, '') || ''
      } catch (error) {
        console.error('加载失败:', error)
        this.$toast('加载失败，请重试')
      }
    },
    onClickLeft () {
      this.$router.back()
    },
    onClickRight () {
      this.$router.push({ path: '/' })
    },
    async handleLike () {
      const res = await handleOperation({
        id: this.id,
        optType: 1
      })
      console.log(res)
      this.$toast('操作成功')
    },
    async handleCollect () {
      const res = await handleOperation({
        id: this.id,
        optType: 2
      })
      console.log(res)
      this.$toast('操作成功')
    }
  }
}
</script>

<style lang="less" scoped>
.details-page {
  min-height: 100vh;
  background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
}

.content-wrapper {
  padding: 12px;
  max-width: 800px;
  margin: 0 auto;
}

.article-header {
  background: white;
  padding: 24px;
  border-radius: 16px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  margin-bottom: 16px;
}

.article-title {
  font-size: 1.5rem;
  font-weight: 700;
  color: #2c3e50;
  line-height: 1.4;
  margin-bottom: 20px;
  text-align: center;
}

.author-info {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px;
  background: #f8f9fa;
  border-radius: 12px;
}

.author-avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 2px solid #e3e6f0;
}

.author-meta {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.author-name {
  font-size: 16px;
  font-weight: 600;
  color: #34495e;
}

.publish-time {
  font-size: 14px;
  color: #7f8c8d;
}

.article-content {
  background: white;
  padding: 24px;
  border-radius: 16px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  margin-bottom: 16px;
}

.content-text {
  font-size: 16px;
  line-height: 1.8;
  color: #34495e;
  text-align: justify;
  word-wrap: break-word;
}

.interaction-panel {
  background: white;
  padding: 24px;
  border-radius: 16px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}

.stats-info {
  display: flex;
  justify-content: center;
  gap: 32px;
  margin-bottom: 24px;
  padding-bottom: 20px;
  border-bottom: 1px solid #e3e6f0;
}

.stat-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  color: #7f8c8d;
}

.stat-icon {
  font-size: 18px;
}

.stat-icon.active {
  color: #ff6b6b;
}

.action-buttons {
  display: flex;
  justify-content: center;
  gap: 20px;
}

.action-btn {
  min-width: 120px;
  font-size: 16px;
  font-weight: 500;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
}

.action-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
}

.like-btn {
  background: linear-gradient(135deg, #ff9f9f, #ff6b6b);
  border-color: #ff6b6b;
  color: white;
}

.collect-btn {
  background: linear-gradient(135deg, #ffd93d, #feca57);
  border-color: #feca57;
  color: white;
}

.like-btn-active {
  background: linear-gradient(135deg, #ff4757, #ee5a52) !important;
  border-color: #ff4757 !important;
}

.collect-btn-active {
  background: linear-gradient(135deg, #ffa502, #ff9ff3) !important;
  border-color: #ffa502 !important;
}

// 响应式设计 - 优化移动端布局
@media screen and (max-width: 768px) {
  .details-page {
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
  }

  .content-wrapper {
    padding: 0;
    margin: 0;
    max-width: 100%;
  }

  .article-header {
    padding: 16px;
    margin-bottom: 12px;
    border-radius: 0;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
    border-bottom: 1px solid #e9ecef;
  }

  .article-title {
    font-size: 20px;
    line-height: 1.3;
    margin-bottom: 16px;
    text-align: left;
    padding: 0 8px;
  }

  .author-info {
    padding: 12px;
    background: #f8f9fa;
    border-radius: 8px;
    gap: 10px;
  }

  .author-avatar {
    width: 40px;
    height: 40px;
    border-width: 1px;
  }

  .author-name {
    font-size: 15px;
  }

  .publish-time {
    font-size: 13px;
  }

  .article-content {
    padding: 16px;
    margin: 0 12px 12px;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
  }

  .content-text {
    font-size: 15px;
    line-height: 1.7;
    text-align: left;
    color: #495057;
  }

  .interaction-panel {
    padding: 16px;
    margin: 0 12px 12px;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
  }

  .stats-info {
    gap: 24px;
    margin-bottom: 16px;
    padding-bottom: 16px;
  }

  .stat-item {
    font-size: 13px;
    gap: 6px;
  }

  .stat-icon {
    font-size: 16px;
  }

  .stat-icon.active {
    color: #ff6b6b;
  }

  .action-buttons {
    gap: 12px;
    flex-direction: row;
    justify-content: space-between;
  }

  .action-btn {
    flex: 1;
    min-width: auto;
    max-width: none;
    font-size: 15px;
    padding: 0 16px;
    height: 44px;
    margin: 0 4px;
  }
}

// 超小屏幕优化 (iPhone SE, 小屏安卓)
@media screen and (max-width: 375px) {
  .article-title {
    font-size: 18px;
  }

  .author-info {
    padding: 10px;
  }

  .author-avatar {
    width: 36px;
    height: 36px;
  }

  .article-header,
  .article-content,
  .interaction-panel {
    margin-left: 8px;
    margin-right: 8px;
  }

  .stats-info {
    gap: 20px;
  }

  .action-btn {
    font-size: 14px;
    height: 42px;
  }
}

// 横屏模式优化
@media screen and (max-width: 768px) and (orientation: landscape) {
  .content-wrapper {
    padding: 8px 16px;
  }

  .article-header,
  .article-content,
  .interaction-panel {
    margin-left: 16px;
    margin-right: 16px;
  }

  .action-buttons {
    flex-direction: row;
    max-width: 400px;
    margin: 0 auto;
  }
}

// 触摸设备优化
@media (hover: none) and (pointer: coarse) {
  .action-btn:hover {
    transform: none;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  }

  .action-btn:active {
    transform: scale(0.98);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  }
}

// 优化滚动条样式 - 仅在桌面端显示
@media screen and (min-width: 769px) {
  ::-webkit-scrollbar {
    width: 6px;
  }

  ::-webkit-scrollbar-track {
    background: #f1f1f1;
  }

  ::-webkit-scrollbar-thumb {
    background: #c1c1c1;
    border-radius: 3px;
  }

  ::-webkit-scrollbar-thumb:hover {
    background: #a8a8a8;
  }
}
</style>
